<template>
  <li @mouseenter="handleenter" @mouseleave="handerleave">
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @click="handlecheckbox(todo.id, $event)"
      />
      <span>{{ todo.val }}</span>
    </label>
    <button
      class="btn btn-danger"
      :class="{ active: flag }"
      @click="deletetodo(todo.id)"
    >
      删除
    </button>
  </li>
</template>

<script>
import { defineComponent, ref } from "vue";
import pubsub from "pubsub-js";
export default defineComponent({
  name: "Item",
  props: ["todo", "updatetodo"],
  setup(props) {
    const flag = ref(false);
    function handleenter() {
      flag.value = true;
    }
    function handerleave() {
      flag.value = false;
    }
    function deletetodo(id) {
      pubsub.publish("deleteitem", id);
    }
    function handlecheckbox(id, e) {
      props.updatetodo(e.target.checked, id);
    }
    return {
      handleenter,
      handerleave,
      deletetodo,
      handlecheckbox,
      flag,
    };
  },
});
</script>

<style lang="scss" scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  label {
    float: left;
    cursor: pointer;
    input {
      vertical-align: middle;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
  }
  button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  &:before {
    content: initial;
  }
  &:last-child {
    border-bottom: none;
  }
}
.active {
  display: block;
}
</style>
